<template>
  <el-cascader
    :value="value"
    :options="areas"
    :props="optionProps"
    :disabled="disable"
    @change="handleChange" ref="city" clearable size="medium"  style="width: 100%"></el-cascader>
</template>

<script>
import {getAreaTree} from "@/api/area";
export default {
  name: "AreaSelector",
  data(){
    return {
      optionProps: { //配置节点
        value: 'code',
        label: 'name',
        children: 'nodes',
        checkStrictly:false
      },
      localValue:[]
    }
  },
  created() {
    this.optionProps.checkStrictly = this.checkStrictly
  },
  watch: {
    value(newVal) {
      // 当父组件的value变化时，同步更新localValue
      this.localValue = newVal;
    }
  },
  props: {
    value: {type:Array, default: () => {
        return ['340000','340100','340103']
      }},
    areaType: {type:Number, default: 0},
    disable:{type:Boolean,default: false},
    areas:{type:Array,default: []},
    checkStrictly:{type:Boolean,default:false},
  }, //0 行政区域 1 小区 2 楼栋
  methods:{
    handleChange(){
      const nodes = this.$refs.city.getCheckedNodes(true)
      if(nodes.length > 0){
        this.$emit("selectArea",nodes[0])
      }else{
        this.$emit("selectArea",'')
      }
    },
    setSelectedNodes(nodes){
      this.localValue = nodes
    },
    reload(){
      getAreaTree({type: this.areaType}).then(response => {
        this.remote = response.data
      })
    }
  }
}
</script>

